<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>家长端 - 请假申请</title>
  <link rel="stylesheet" href="../css/style.css">
  <style>
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .leave-history {
      margin-top: 30px;
    }
    .history-item {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
    }
    .status-approved {
      color: #28a745;
    }
    .status-pending {
      color: #ffc107;
    }
    .status-rejected {
      color: #dc3545;
    }
  </style>
</head>
<body>
<div class="nav">
  <a href="view_letter.html">查看信件</a>
  <a href="chat.html">对话沟通</a>
  <a href="more_features.html">更多功能</a>
  <a href="../index.html">退出登录</a>
</div>

<div class="container">
  <h3>请假申请</h3>

  <div class="card">
    <h4>新建请假申请</h4>

    <form id="leaveForm">
      <div class="form-group">
        <label for="studentName">学生姓名：</label>
        <input type="text" id="studentName" value="张三" readonly>
      </div>

      <div class="form-group">
        <label for="className">班级：</label>
        <input type="text" id="className" value="高一(1)班" readonly>
      </div>

      <div class="form-group">
        <label for="leaveType">请假类型：</label>
        <select id="leaveType">
          <option value="sick">病假</option>
          <option value="personal">事假</option>
          <option value="other">其他</option>
        </select>
      </div>

      <div class="form-group">
        <label for="startDate">开始日期：</label>
        <input type="date" id="startDate">
      </div>

      <div class="form-group">
        <label for="endDate">结束日期：</label>
        <input type="date" id="endDate">
      </div>

      <div class="form-group">
        <label for="reason">请假原因：</label>
        <textarea id="reason" rows="4" placeholder="请填写请假原因..."></textarea>
      </div>

      <button type="submit" class="btn">提交申请</button>
    </form>
  </div>

  <div class="card leave-history">
    <h4>历史请假记录</h4>

    <div class="history-item">
      <div class="status-approved">已批准</div>
      <p>请假类型：病假</p>
      <p>日期：2025-06-10 至 2025-06-12</p>
      <p>原因：感冒发烧</p>
    </div>

    <div class="history-item">
      <div class="status-pending">待审核</div>
      <p>请假类型：事假</p>
      <p>日期：2025-06-25 至 2025-06-26</p>
      <p>原因：家庭旅行</p>
    </div>
  </div>
</div>
</body>
</html>
